<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<uni-header></uni-header>
		<!-- #endif -->

		<view class="navbar sp" :style="{position:headerPosition,top:headerTop}">
			<view class="nav-item" :class="{current: filterIndex === 0}" @click="tabClick(0)">
				销量优先
			</view>
			<view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
				<text>价格</text>
				<view class="p-box">
					<text :class="{active: priceOrder === 1 && filterIndex === 1}" class="icon icon-arrow_up"></text>
					<text :class="{active: priceOrder === 2 && filterIndex === 1}" class="icon icon-arrow_down"></text>
				</view>
			</view>
		</view>

		<!-- #ifdef H5 -->
		<view class="com-box pc">
			<view class="list-box">
				<view class="left-box">
					<view class="ttl">全部产品</view>
					<uni-nav></uni-nav>
				</view>
				<view class="right-box">
					<view class="ttl-box">
						<text>全部分类</text>
						<text> ＞ 聚氯乙烯</text>
						<text> ＞ SG-3</text>
					</view>
					<view class="navbar">
						<view class="nav-item" :class="{current: filterIndex === 0}" @click="tabClick(0)">
							销量优先
						</view>
						<view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
							<text>价格</text>
							<view class="p-box">
								<text :class="{active: priceOrder === 1 && filterIndex === 1}" class="icon icon-arrow_up"></text>
								<text :class="{active: priceOrder === 2 && filterIndex === 1}" class="icon icon-arrow_down"></text>
							</view>
						</view>
					</view>
					<view class="goods-list">
						<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navToDetailPage(item)">
							<view class="image-wrapper">
								<image :src="item.goodsPic" mode="aspectFill" lazy-load></image>
							</view>
							<view class="text-wrapper">
								<text class="title clamp2">{{item.goodsName}}</text>
								<text class="price">￥{{ isAuth ? item.price : '***' }}</text>
								<text class="size">{{item.specification}}</text>
								<view class="shop clamp">
									<image :src="item.goodsPic" mode="aspectFill"></image>
									{{item.goodsName}}
								</view>
							</view>
						</view>
					</view>
					<uni-pagination :num='pageNum' :page='pages' @pagechange="pagechange"></uni-pagination>
				</view>
			</view>
		</view>
		<!-- #endif -->

		<view class="goods-list sp">
			<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navToDetailPage(item)">
				<view class="image-wrapper">
					<image :src="item.goodsPic" mode="aspectFill" lazy-load></image>
				</view>
				<view class="text-wrapper">
					<text class="title clamp2">{{item.goodsName}}</text>
					<text class="price">￥{{ isAuth ? item.price : '***' }}</text>
					<text class="size">{{item.specification}}</text>
					<view class="shop clamp">
						<image :src="item.goodsPic" mode="aspectFill"></image>
						{{item.goodsName}}
					</view>
				</view>
			</view>
		</view>
		<uni-load-more class="sp" :status="loadingType"></uni-load-more>

		<!-- #ifdef H5 -->
		<uni-footer></uni-footer>
		<!-- #endif -->
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more.vue'
	import uniHeader from '@/components/h5/uni-header.vue'
	import uniFooter from '@/components/h5/uni-footer.vue'
	import uniNav from '@/components/h5/uni-nav.vue'
	import uniPagination from '@/components/h5/uni-pagination.vue'
	export default {
		components: {
			uniLoadMore,
			uniHeader,
			uniFooter,
			uniNav,
			uniPagination
		},
		data() {
			return {
				headerPosition: "fixed",
				headerTop: "0px",
				loadingType: 'more', //加载更多状态
				filterIndex: 0,
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				goodsList: [],
				category3Id: 0,
				keywords: '',
				pageNum: 1,
				pageSize: 10,
				pages: 0,
				isAuth: false,
			}
		},
		onShow() {
			this.isAuth = this.$api.isAuth()
		},
		onLoad(option) {
			// #ifdef H5
			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px'
			// #endif
			this.category3Id = option.id ? option.id : ''
			this.keywords = option.keywords ? option.keywords : ''
			let title = `${option.keywords}的搜索结果`
			if (option.keywords) {
				uni.setNavigationBarTitle({
					title
				})
			}
			this.loadData()
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			if (e.scrollTop >= 0) {
				this.headerPosition = "fixed"
			} else {
				this.headerPosition = "absolute"
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData('refresh')
		},
		//加载更多
		onReachBottom() {
			this.loadData()
		},
		methods: {
			pagechange(currentPage) {
				console.log(currentPage)
				// ajax请求, 向后台发送 currentPage, 来获取对应的数据
				uni.showLoading({
					title: '正在加载'
				})
				this.pageNum = currentPage
				this.loadData('current')
			},
			//加载商品 ，带下拉刷新和上滑加载
			loadData(type = 'add') {
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return
					}
					this.loadingType = 'loading'
				} else {
					this.loadingType = 'more'
				}
				let orderByInfo = {}
				if (this.filterIndex === 0) {
					//销量排序
					orderByInfo = {
						salesNum: 1
					}
				}
				if (this.filterIndex === 1) {
					//价格排序 需要从新获取Page
					orderByInfo = {
						priceSort: this.priceOrder === 1 ? 1 : 2
					}
				}
				if (type === 'refresh') {
					this.pageNum = 1
				}
				this.$api.request('/indexs/getGoodsPageList', {
					category3Id: this.category3Id,
					goodsName: this.keywords,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					...orderByInfo
				}, {
					method: 'GET'
				}).then(res => {
					let tempList = res.data.records
					if (type !== 'add') {
						this.goodsList = []
					}
					this.pages = Math.ceil(res.data.total / this.pageSize)
					this.loadingType = this.pageNum < this.pages ? 'more' : 'nomore'
					this.goodsList = this.goodsList.concat(tempList)
					this.pageNum = this.pageNum + 1
					if (type !== 'add') {
						uni.hideLoading()
						uni.stopPullDownRefresh()
					}
				})
			},
			//筛选点击
			tabClick(index) {
				if (this.filterIndex === index && index !== 1) {
					return
				}
				this.filterIndex = index
				if (index === 1) {
					this.priceOrder = this.priceOrder === 1 ? 2 : 1
				} else {
					this.priceOrder = 0
				}
				uni.pageScrollTo({
					duration: 100,
					scrollTop: 0
				})
				uni.showLoading({
					title: '正在加载'
				})
				this.loadData('refresh')
			},
			//详情
			navToDetailPage(item) {
				uni.navigateTo({
					url: `/pages/product/detail?id=${item.id}`
				})
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if (!this.hasLogin) {
					url = '/pages/public/login'
				}
				uni.navigateTo({
					url
				})
			}
		},
	}
</script>

<style lang="scss">
	.container {
		padding-top: 100upx;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 750px) {
		.container {
			padding-top: 0;
		}

		.list-box {
			display: flex;
			justify-content: space-between;
			margin: 0 auto 20px;

			.left-box {
				width: 200px;

				.ttl {
					height: 50px;
					line-height: 50px;
					color: #fff;
					background-color: $base-color-pc;
					text-align: center;
				}
			}

			.right-box {
				width: 980px;
				background-color: #fff;

				.ttl-box {
					display: flex;
					padding: 0 20px;
					height: 50px;
					color: #fff;
					line-height: 50px;
					background-color: $base-color-pc;

					.link {
						padding: 0 25px;
					}
				}
			}
		}

		.goods-list {
			margin: 0 18px;

			.goods-item {
				margin: 0 18px 30px;
			}
		}
	}

	/* #endif */
</style>
